<template>
  <body class="ptest">
    <el-container style="height: 100%">
      <el-aside width="15%" class="side-bar" style="text-align: center">
        <i class="el-icon-back back_btn" @click="back()"></i>
        <h1>试题列表</h1>
        <el-menu class="el-menu-vertical-demo">
          <el-menu-item
            v-for="(item, index) in textList"
            :key="index"
            style="font-size: 16px"
            @click="chooseTest(item)"
            :disabled="beginTest">
            <span slot="title">{{ item.paperName }}</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main v-if="beginTest">
        <div class="test-box">
          <div>
            <div class="title">{{ text.name }}</div>
            <div class="test-total-content">
              <div
                class="test-content"
                v-for="(question, index) in question"
                :key="index">
                {{ index + 1 + '、' + question.content + '(  )' }}
                <el-radio v-model="youwrite[index]" label="A">{{
                  question.sectionA
                }}</el-radio>
                <el-radio v-model="youwrite[index]" label="B">{{
                  question.sectionB
                }}</el-radio>
                <el-radio v-model="youwrite[index]" label="C">{{
                  question.sectionC
                }}</el-radio>
                <el-radio v-model="youwrite[index]" label="D">{{
                  question.sectionD
                }}</el-radio>
                <div class="answer" v-show="statue == 1">
                  <span
                    v-if="youwrite[index] == question.answer"
                    style="color: rgb(0, 203, 19)"
                    >恭喜您，回答正确！</span
                  >
                  <span v-else style="color: red"
                    >很遗憾，回答错误！正确答案：{{ question.answer }}</span
                  >
                </div>
              </div>
              <el-button
                :disabled="statue == 1"
                type="primary"
                style="position: absolute; right: 20px; bottom: 15px"
                @click="submitTest()"
                >提交试卷</el-button
              >
            </div>
          </div>
        </div>
        <div class="text-info">
          <div style="font-size: 30px; margin-bottom: 10px">剩余时间</div>
          <div style="font-size: 40px">
            {{ time.minute }}:{{ time.secondString }}
          </div>
        </div>
      </el-main>
      <!--当没有选择试卷的时候-->
      <el-main v-else>
        <div style="margin-top: 15%">
          <el-result icon="info" title="请选择试卷"> </el-result>
        </div>
      </el-main>
    </el-container>
    <el-dialog
      width="25%"
      :visible.sync="scoreVisible"
      :before-close="seeAnswer">
      <div style="font-size: 20px; margin-bottom: 10px">考试结束！</div>
      <div style="font-size: 20px">
        您本次考试答对了：{{ text.correct }}/{{ text.totalScore }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="seeAnswer()">查看详情</el-button>
      </span>
    </el-dialog>
  </body>
</template>
<script>
import { getTestList, getTestQues } from '../api/index'
export default {
  name: 'test',
  data() {
    return {
      textList: [],
      text: {
        totalScore: '',
        name: '',
        correct: 0,
      },
      question: [],
      youwrite: [],
      page: 0,
      radio: '',
      statue: 0, //0是考试，1是答案
      time: {
        second: 0,
        minute: 0,
        secondString: '00',
      },
      scoreVisible: false,
      beginTest: false,
    }
  },
  created() {
    this.getAllTextList()
  },
  methods: {
    back() {
      this.$router.push({ path: '/home' })
    },
    getAllTextList() {
      let data = {}
      data.paperName = ''
      data.pageSize = 100000
      data.pageNum = 0
      console.log(data)
      getTestList(data).then((res) => {
        console.log(res)
        this.textList = res.data.data
      })
    },
    chooseTest(item) {
      this.$confirm(
        '确认考试：' + item.paperName + '；考试时长' + item.totalTime + '分钟',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.getQuestion(item.paperId)
          this.text.name = item.paperName
          this.text.totalScore = item.totalScore
          this.time.minute = item.totalTime
          this.beginTest = true
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消',
          })
        })
    },
    getQuestion(id) {
      let data = {}
      data.paperId = id
      getTestQues(data).then((res) => {
        console.log('ques', res)
        this.question = res.data.data
        this.text.totalScore = this.question.length
        this.countDown()
      })
    },
    changeSecond() {
      if (this.time.second < 10) {
        this.time.secondString = '0' + this.time.second
      } else {
        this.time.secondString = this.time.second
      }
    },
    countDown() {
      window.timer = window.setInterval(() => {
        if (this.time.second == 0 && this.time.minute != 0) {
          this.time.second = 59
          this.time.minute -= 1
        } else if (this.time.second == 0 && this.time.minute == 0) {
          // window.clearInterval(window.timer)
          // this.scoreVisible = true
          this.submitTest()
        } else {
          this.time.second -= 1
        }
        this.changeSecond()
      }, 1000)
    },
    submitTest() {
      for (let i in this.youwrite) {
        if (this.youwrite[i] == this.question[i].answer) {
          this.text.correct += 1
        }
      }
      this.text.totalScore = this.question.length
      this.scoreVisible = true
      this.time.minute = 0
      this.time.second = 0
      this.changeSecond()
      window.clearInterval(window.timer)
    },
    seeAnswer() {
      this.scoreVisible = false
      this.statue = 1
    },
  },
}
</script>
<style scoped>
.ptest {
  background-image: url('../assets/测试的背景.jpg');
  background-size: 100% 100%;
}
.side-bar {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  font-size: 20px;
}
::v-deep .el-menu {
  background-color: transparent !important;
}
.test-box {
  width: 75%;
  height: 100%;
  /* background-color: green; */
  float: left;
}
.text-info {
  width: 20%;
  height: 50%;
  background-color: rgba(255, 255, 255, 0.6);
  position: absolute;
  right: 20px;
  top: 75px;
  border-radius: 5px;
  text-align: center;
}
.no-test {
  background-color: rgba(255, 255, 255, 0.6);
  width: 100%;
  height: 100%;
  color: #1296db;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 35px;
  margin-left: 5px;
}
.back_btn {
  float: left;
  font-size: 35px;
}
.title {
  font-size: 35px;
  font-weight: 800;
  color: white;
  text-shadow: 2px 4px 1px #777;
  text-align: center;
  /* background-color: blue; */
  margin-bottom: 20px;
}
.test-content {
  width: 100%;
  padding-left: 50px;
  box-sizing: border-box;
  border-radius: 5px;
  padding-bottom: 50px;
}
::v-deep .el-radio {
  display: block;
  margin-top: 20px;
}
.test-total-content {
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 5px;
  margin-top: 20px;
  padding-top: 20px;
  position: relative;
}
.answer {
  margin-top: 20px;
  margin-left: 10px;
}
</style>
